<template>
 
  <el-form :inline="true" :model="from" class="demo-form-inline">
  <el-form-item label="合同标题">
    <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
  </el-form-item>
  <el-form-item label="对方单位">
    <el-input v-model="from.unit" placeholder="对方单位" clearable />
  </el-form-item>
  <el-form-item label="对方负责人">
    <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
  </el-form-item>
  <el-form-item label="经办人">
    <el-input v-model="from.attn" placeholder="经办人" clearable />
  </el-form-item>
  <el-form-item label="签订日期">
      <el-date-picker
      v-model="from.dateofSigning"
      type="date"    value-format="YYYY-MM-DD"
      placeholder="签订日期"
      clearable
    />
  </el-form-item>
  <el-button size="small" type="primary" @click="show" >查询</el-button>
 <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
 <div>
   <el-radio-group v-model="radio" size="large">
     <el-radio-button label="全部" @change="show1()" />
     <el-radio-button label="待审批" @click="show2()"  />
     <el-radio-button label="已审批" @click="show3()"  />
   </el-radio-group>
 </div>
  </el-form>
  <el-table :data="tableData" style="width: 100%" >
      
  <el-table-column prop="contractNumber" label="合同编号" width="100" />
  <el-table-column prop="contractTitle" label="合同标题" width="100" />
  <el-table-column prop="unit" label="对方单位" width="100" />
  <el-table-column prop="personCharge" label="对方负责人" width="100" />
  <el-table-column prop="contractType" label="合同类别" width="100" />
<el-table-column prop="dateofSigning" label="签订日期" width="100" >
 <template #default="scope">
          {{ scope.row.dateofSigning.substring(0, 10)}}
 </template>
</el-table-column>
  <el-table-column prop="attn" label="经办人" width="100" />
  <el-table-column prop="createdDate" label="创建时间" width="100" >
    <template #default="scope">
      {{ scope.row.createdDate.substring(0, 10)}}
    </template>
  </el-table-column>
  <el-table-column prop="ccontractStatus" label="状态" width="100" >
      <template #default="scope">
        
          <el-tag type="success" v-if="scope.row.ccontractStatus == 2">待审批</el-tag>
          <el-tag type="success" v-if="scope.row.ccontractStatus == 3">已通过</el-tag>
          <el-tag type="success" v-if="scope.row.ccontractStatus == 4">已拒绝</el-tag>
        
      </template>
</el-table-column>
  <el-table-column prop="approver" label="审批人" width="100" />
  <el-table-column  label="操作" width="500" >
  <template #default="scope">
     <el-button size="small" type="primary" @click="look(scope.row.contractId)" >查看</el-button>
    <el-button 
 size="small" 
 type="primary" 
 :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4"
 @click="yes(scope.row.contractId)"
>
 同意
</el-button>
        <el-button 
 size="small" 
 type="danger" 
 :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4"
 @click="no(scope.row.contractId)"
>
 拒绝
</el-button>
</template>
    </el-table-column>
</el-table>
<el-pagination
    v-model:current-page="page.Pageindex"
    v-model:page-size="page.Pagesize"
    :page-sizes="[3, 6, 9, 11]"
     layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />


</template>
 <script setup lang='ts'>
 import axios  from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
import { ref, reactive, onMounted, watch } from 'vue'; 
  import { useRouter } from 'vue-router';
const router=useRouter()
const radio = ref()//单选查询
   //查询条件
  const from=reactive({
          contractTitle:'',
          unit:'',
          personCharge:'',
          attn:'',
          dateofSigning:'',
          ccontractStatus:'',
          ContractClassification:2
})
//重置
const chong=()=>{
from.contractTitle='',
from.unit='',
from.personCharge='',
from.attn='',
from.dateofSigning='',
   from.ccontractStatus = ''
show()
 }
//通过
 const yes = (id:number) =>
{
 let data = {
    "approvalResult": "同意",
 "approvalNotes": "",
 "approver": "",
 "contractId": id,
 "subgrantor": ""
   }
   console.log(data)
   axios.post("/hwrite/api/Contract/CrerateAppro", data).then((res) => { 
     if (res.data.data>0) {
       ElMessage.success('已通过')
       show()
     }
     else {
 ElMessage.error('操作失败')
}
   })
}
//拒绝
 const no = (id: number) =>
 {

     let data = {
    "approvalResult": "拒绝",
 "approvalNotes": "",
 "approver": "",
 "contractId": id,
 "subgrantor": ""
   }
   console.log(data)
   axios.post("/hwrite/api/Contract/CrerateAppro", data).then((res) => { 
     if (res.data.data>0) {
       ElMessage.success('已拒绝')
       show()
     }
     else {
 ElMessage.error('操作失败')
}
   })
}
//分页
const page=reactive({
  Pageindex:1,
  Pagesize:3,
  totalCount:0,
  PageCount:0

})
const handleSizeChange = (val:any) => {
  page.Pagesize=val;
  show();
}
const handleCurrentChange = (val:any) => {
  page.Pageindex=val;
  show();
} 
 //显示货主合同信息
    const tableData = ref([]);  
const show=()=>{
console.log(from.ContractClassification)
  axios.get('/hread/api/ContractRead/Show',
          {
              params: {
                  Pageindex:page.Pageindex,
                  Pagesize:page.Pagesize,
                  ContractTitle:from.contractTitle,
                  Unit:from.unit,
                  PersonCharge:from.personCharge,
                  Attn:from.attn,
                  DateofSigning:from.dateofSigning,
                  CcontractStatus:from.ccontractStatus,
                  ContractClassification:from.ContractClassification
 } 
     }
      )
      .then(res => {
   tableData.value = res.data.data.list;
    page.totalCount=res.data.data.totalCount;
       page.PageCount=res.data.data.pageCount;
      
        
      })

 }
//显示全部信息
const show1=()=>{
 show()
 }
//显示待审批
const show2=()=>{
from.ccontractStatus="2",
 show()
    
 }
//显示已审批
const show3=()=>{
 from.ccontractStatus="3",
 show()
}
 //审批界面
 const formList = reactive({
   ccontractStatus: "",
})
const look=(ContractId:number)=>{
   axios.get('/hread/api/ContractRead/BackfillTshowContract', {
       params: {
         ContractId: ContractId
       }
     }).then(res => {

     formList.ccontractStatus=res.data.data.ccontractStatus
     if (formList.ccontractStatus == 3 || formList.ccontractStatus == 4) { 
router.push({
     path:'/Approval/CcontractLook',
     query:{ContractId:ContractId}

  })
 }
 else{
    router.push({
     path:'/Approval/CcontractApprove',
     query:{ContractId:ContractId}

  })
 }
     })


 
}
//钩子函数
  onMounted(() => {
     show()
      })

</script>
